<template>
  <div class="fsc-header">
    <div class="fsc-thead" v-if="scheduledata">
      <div
        class="fsc-th-none"
        v-if="!appoRepair"
      >
        <template v-if="seasonVal && seasonType==='full'">
          <el-popover
            placement="right"
            width="200"
            trigger="hover">
            <div>
              <el-radio-group v-model="seasonVal" @change="seasonChange">
                <el-radio label="夏令时">夏令时</el-radio>
                <el-radio label="冬令时">冬令时</el-radio>
              </el-radio-group>
            </div>
            <span slot="reference" class="hd_season">/<span class="span_txt">{{seasonVal==='夏令时'?'夏':'冬'}}</span></span>
          </el-popover>
        </template>
        <template v-if="checkedAllShow && isEdit && checkboxShow">
          全选
          <el-checkbox v-model="checkedAllVal" @change="checkedAllChange"></el-checkbox>
        </template>
      </div>
      <div
        class="fsc-th"
        v-for="(item, index) in scheduledata"
        :key="index"
        :class="{
          isEdit:isEdit && (!item.disable || allCkb),
          active: item.checkedAll,
          isHoliday: item.rest
        }"
        @click="scheduleColAll(item, index)"
      >
        <span class="tit">
          <div class="ckb_box" v-if="!item.disable || allCkb" v-permission="['YJYY10001001002', 'YJYY10008002001']">
            <div class="ckb_dlg"></div>
            <el-checkbox v-if="isEdit && checkboxShow" @click="scheduleColAll(item, index)" v-model="item.checkedAll"></el-checkbox>
          </div>
          <span>{{item.week}}{{statusTemplate==='schedule' && item.date?' '+item.date:''}}</span>
          <div class="cop_copy" v-if="isCopy && (!item.disable || allCkb)" v-permission="['YJYY10001001002', 'YJYY10008002001']" @click.stop="copCopy(item, index)">
            <el-tooltip class="item" effect="dark" content="复制导入其他时间的时段号源！" placement="top-start">
              <i class="el-icon-copy-document"></i>
            </el-tooltip>
          </div>
          <i class="el-icon-edit mar-l-3" v-if="(!item.disable || allCkb) && checkboxShow && editShow" v-permission="['YJYY10001001002', 'YJYY10008002001']" @click="editTodaySchedule(item, index)"></i>
          <!-- <span v-if="(!item.disable || allCkb) && checkboxShow && editShow">
            <i class="el-icon-edit mar-l-3" v-permission="['YJYY10001001002', 'YJYY10008002001']" @click="editTodaySchedule(item, index)"></i>
          </span> -->
        </span>
        <div class="tag" v-if="item.rest">假</div>
        <div class="total">
          <el-popover
            placement="top-start"
            title=""
            width="240"
            trigger="hover">
            <div class="total_s">
              <template v-if="statusTemplate==='schedule'">
                <div>号源总数：<span class="span_num">{{item.appointmentTotal + item.appointmentCallTotal}}</span></div>
                <div>已预约/未预约：<span class="span_num">{{item.appointmentCallTotal}}/{{item.appointmentTotal}}</span></div>
                <template v-if="item.appoInfoForStatistics">
                  <div v-for="(it, index) in Object.keys(item.appoInfoForStatistics.total)" :key="index">
                    {{it}}：
                    <span class="span_num">{{item.appoInfoForStatistics.callNum[it]}}/{{item.appoInfoForStatistics.total[it]}}</span>
                  </div>
                </template>
                <div>增强号源(已预约/未预约)：<span class="span_num">{{item.appointmentCallTotalZq}}/{{item.appointmentTotalZq}}</span></div>
                <template v-if="item.appoInfoForStatistics">
                  <div v-for="(it, index) in Object.keys(item.appoInfoForStatistics.zqNum)" :key="index + it">
                    {{it}}：
                    <span class="span_num">{{item.appoInfoForStatistics.callNumZq[it]}}/{{item.appoInfoForStatistics.zqNum[it]}}</span>
                  </div>
                </template>
              </template>
              <template v-else>
                <div>号源总数：<span class="span_num">{{item.appointmentTotal}}</span></div>
                <div>增强号源：<span class="span_num">{{item.appointmentTotalZq}}</span></div>
              </template>
            </div>
            <span slot="reference"><span :class="{appo_total_gogogo:item.appointmentCallTotal>0}">{{item.appointmentCallTotal}}</span>/{{item.appointmentTotal}}</span>
          </el-popover>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import bus from '@/api/bus'
import { mapGetters } from 'vuex'
export default {
  props: {
    scheduledata: {
      type: Array,
      default: null
    },
    isEdit: Boolean,
    isCopy: Boolean,
    editShow: Boolean,
    checkboxShow: Boolean,
    allCkb: {
      type: Boolean,
      default: false
    },
    statusTemplate: {
      type: String,
      default: 'schedule'
    },
    seasonCur: {
      type: String,
      default: ''
    },
    checkedAllShow: {
      type: Boolean,
      default: true
    },
    checkedAll: {
      type: Boolean,
      default: false
    },
    // 模板排列，定位、日按顺序排
    appoRepair: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      seasonType: window.g.SEASON_FSC
    }
  },
  computed: {
    ...mapGetters(['isShowEditScedule']),
    seasonVal: {
      get() {
        return this.seasonCur
      },
      set(val) {
        this.$emit('update:seasonCur', val)
      }
    },
    checkedAllVal: {
      get() {
        return this.checkedAll
      },
      set(val) {
        this.$emit('update:checkedAll', val)
      }
    }
  },
  created() {
    // // console.log('checkbox-show-in Header--created', this.checkboxShow)
  },
  mounted() {
    // console.log('=======fscheader=======')
    // console.log('appoRepair', this.appoRepair)
    // console.log('checkboxShow_in_item', this.checkboxShow)
    // console.log('statusTemplate', this.statusTemplate)
  },
  methods: {
    // 选择全列
    scheduleColAll(row, index) {
      // console.log('you click scheduleColAll', row, row.checkedAll)
      if (this.isEdit && (!row.disable || this.allCkb)) {
        this.$emit('HeaderColAll', { row, index })
        // this.$forceUpdate()
      }
    },
    editTodaySchedule(row, index) {
      // // console.log('this.isEdit', this.isEdit)
      // // console.log('row.disable', this.disable)
      // // console.log('this.allCkb', this.allCkb)
      if (this.isEdit && (!row.disable || this.allCkb)) {
        this.$emit('HeaderColAll', { row, index })
        let data = {
          type: 'edit_in',
          row: row,
          index: index
        }
        bus.$emit('editTodaySchedule', data)
      }
    },
    copCopy(row, index) {
      if (this.isEdit && (!row.disable || this.allCkb)) {
        this.$emit('copyInsert', { dateInfo: row, index })
      }
    },
    seasonChange() {
      this.$emit('seasonChange', this.seasonVal)
    },
    checkedAllChange() {
      this.$emit('checkedAllChange')
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/styles/fullschedule.scss';
.fsc-thead{
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  .fsc-th-none{
    height: $headerHeight;
    width: $sidebarWidth;
    border-right: solid 1px $borderColor;
    text-align: center;
    line-height: $headerHeight;
  }
}
.fsc-th{
  flex: 1;
  // text-align: center;
  border-right: solid 1px $borderColor;
  position: relative;
  overflow: hidden;
  padding:0 8px;
  box-sizing: border-box;
  text-overflow: ellipsis;
  // cursor: pointer;
  user-select:none;
  span.tit{
    position: relative;
    line-height: $headerHeight;
    white-space: nowrap;
  }
  &:last-child{
    border-right: none;
  }
  .tag{
    display: block;
    min-width: 20px;
    height: 18px;
    line-height: 16px;
    text-align: center;
    font-size: 12px;
    color: #fff;
    background-color: #fd8282;
    position: absolute;
    left: 10px;
    top: 6px;
    border: solid 1px #fd8282;
    border-radius: 3px;
  }
  .total{
    display: block;
    line-height: 32px;
    font-size: 12px;
    color: #666;
    position: absolute;
    right: 10px;
    top: 0px;
  }
}
.isEdit{
  cursor: pointer;
  &.active{
    background-color: rgba(176, 215, 243, 0.8);
  }
  &:hover{
    background-color: rgba(176, 215, 243, 0.6);
  }
}
.ckb_box{
  display: inline-block;
  // position: absolute;
  // left: -20px;
  // top: 0px;
  z-index: 1;
  line-height: normal;
  .ckb_dlg{
    width: 30px;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 20;
    background-color: rgba($color: #fff, $alpha: 0);
  }
}
.cop_copy{
  display: inline-block;
  // position: absolute;
  // right: -20px;
  // top: 0;
  z-index: 2;
  line-height: normal;
}
.hd_season{
  .span_txt{
    cursor:pointer;
    color: #f00;
  }
}
.appo_total_gogogo{
  font-weight: bold;
  color: #00C0EF;
}
</style>
